{include file="common/head"}
  <link rel="stylesheet"    href="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.24.2/jodit.es2018.min.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.24.2/jodit.es2018.min.js"></script> 

</head>
<body style="text-align: left;">
    <div class="container p-3" style="max-width: 800px;"  >
    <h2>商品编辑</h2>
    <form method="post" enctype="multipart/form-data" action="/index.php/goods/edit">
      <input type="hidden" name="id" id="id" value="{$data.id}" />
       <div class="mb-3 row">
        <div class="col-2">
          <lable for="fid" class="form-label">商品分类: </label>
        </div>
        <div class="col-10">
          <select id="cat_id" name="cat_id" class="form-control">
              {foreach $cats as $k=>$v}
                <option value="{$k}" {if $k==$data.cat_id} selected style="color:blue;font-weight: bold;" {/if}>
                    {if $v['deepth']==1}
                        ├─
                    {elseif $v['deepth']==2}
                        &nbsp;&nbsp;&nbsp;&nbsp;├─
                    {elseif $v['deepth']==3}
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├─
                    {/if}
                    {$v['name']}
                </option>
              {/foreach}
          </select>
        </div>
      </div>


      <div class="mb-3 row">
        <div class="col-2">
          <lable for="name" class="form-label">中文名:</label>
        </div>
        <div class="col-10">
          <input type="text" class="form-control" id="name" name="name" value="{$data.name}" placeholder="Goods name" />
        </div>
      </div>

      <div class="mb-3 row">
        <div class="col-2"><label for="desc" class="form-label">说明:</label></div>
        <div class="col-10">
          <input type="text" class="form-control" id="desc" name="desc" value="{$data.desc}" placeholder="说明" />
        </div>
      </div>
 

     <div class="mb-3 row">
      <div class="col">
        <label for="price" class="form-label">最低价:</label>
        <input type="number" class="form-control" id="price" name="price" value="{$data.price}" placeholder="price" />
      </div>      
        <div class="col" style="display: none;">
        <label for="discount" class="form-label">折扣(0.1-5.0):</label>
        <input type="number" class="form-control" id="discount" name="discount" value="1"  min="0.1" max="100.0" step="0.1" />
        </div>
      <div class="col">
        <label for="price1" class="form-label">最高价:</label>
        <input type="number" class="form-control" id="price1" name="price1" value="{$data.price1}" placeholder="优惠价格" />   
        </div>
      </div>

      <div class="mb-3 row">
        <div class="col-2"><label for="status" class="form-label">是否启用:</label></div>
        <div class="col-10">
          <input type="radio" class="form-check-input" id="radio1" name="status" value="1" {if $data.status==1} checked {/if}/> 
          <label class="form-check-label" for="radio1">上架</label>
          <input type="radio" class="form-check-input" id="radio2" name="status" value="2" {if $data.status==2} checked {/if}/>
          <label class="form-check-label" for="radio2">下架</label>
        </div>
       </div>

      
      <div class="mb-3 row">
        <div class="col-2"><label for="hot" class="form-label">热门商品:</label></div>
        <div class="col-10">
          {if $user['group_id']==1}
          <input type="radio" class="form-check-input" id="radio3" name="hot" value="1" {if $data.hot==1} checked {/if}/> 
          <label class="form-check-label" for="radio3">热门</label>
          <input type="radio" class="form-check-input" id="radio4" name="hot" value="0" {if $data.hot!=1} checked {/if}/>
          <label class="form-check-label" for="radio4">普通</label>       
          {else}
             <span class="{if $data.hot==1}bi-check-lg{else}bi-x-lg{/if}" style=""></span>
          {/if}
        </div>
       </div>


      <div class="mb-3 row">
        <div class="col-2">
          <label for="file" class="form-label">本地图片:</label>
        </div>
        <div class="col" style="display: flex;">
          {if $data.image}
          {foreach $data.image as $image}
            <div style="border:1px solid #ccc;text-align: center;margin-right:2px;">
                <img class="goods_image" src="{$image}" style="width:70px;" />
                <span class="bi-x-lg img_remove" row_id="{$data.id}" src="{$image}" title="删除图片" style="cursor: pointer;"></span>
            </div>
          {/foreach}
          {/if}
            <div >
              <button id="img_add" type="button" class="btn btn-info"><span class="bi-plus-lg" ></span></button>
            </div>
            <input id="file1" type="file"  name="file1" style="display: none;" />
        </div>
      </div>  

      <div class="mb-3 row">
        <div class="col-2"><label for="title" class="form-label">网络图<br/>(请注意：只粘贴网络图片地址，多个图片用英文逗号分隔图片):</label></div>
        <div class="col-10">
          <textarea id="other_imgs" name="other_imgs" class="form-control" style="height: 140px;">{$data.other_imgs}</textarea>
        </div>
      </div>

      <div class="mb-3 row">
        <label for="title" class="form-label">详细介绍:</label>
        <div class="col"><textarea id="content" name="content" class="form-control">{$data.content}</textarea></div>
      </div>

      <!-- 详情图片集 -->
      <div class="mb-3 row">
        <div class="col-2">
          <label for="file" class="form-label">更多详情图片:</label>
        </div>
        <div class="col" style="display: flex;">
          {if $data.dt_imgs}
          {foreach $data.dt_imgs as $image}
            <div style="border:1px solid #ccc;text-align: center;margin-right:2px;">
                <img class="goods_image" src="{$image}" style="width:100px;" />
                <span class="bi-x-lg img_remove2" row_id="{$data.id}" src="{$image}" title="删除图片" style="cursor: pointer;"></span>
            </div>
          {/foreach}
          {/if}
            <div >
              <button id="img_add2" type="button" class="btn btn-info"><span class="bi-plus-lg" ></span></button>
            </div>
            <input id="file2" type="file"  name="file2" style="display: none;" />
        </div>
      </div>  

       
      <button  type="button" class="btn btn-primary" onclick="doSave()">保存(Save)</button>

    </form>
    </div>

<script type="text/javascript">
    var editor = Jodit.make('#content',{
      toolbarButtonSize: 'small',
      language: 'zh_cn',
    });  

    function doSave(){
      if(!$("#name").val() || !$("#price").val() || !$("#discount").val()){
        layer.msg("别瞎闹！",function(){});
        $("#discount").val(1);
        return false;
      }
      $('form').submit();
    }

  $(document).ready(function(){

    $("#discount,#price").on('blur',function(){
      var price = $("#price").val();
      var ds = $("#discount").val();

      if(isNaN(ds) || ds<0.1 || ds>1){
        layer.msg('折扣错误！');
        $("#discount").val(1);
      }else{
        $("#price1").val(($("#price").val()*ds).toFixed(2));
      }
    })


    $(".img_remove").on('click',function(){
      var src=$(this).attr('src');
      var row_id=$(this).attr('row_id');

      //询问框
      layer.confirm('是否确定删除图片?', {
        btn: ['确定','取消'] //按钮
      }, function(){
        
        $.post('/index.php/sys/img_remove',{tb:'goods',row_id:row_id,field:'image',src:src},function(res){
            if(res.code){
                layer.msg(res.msg);
                location.reload();
            }
        })

      }, function(){
        layer.msg("好的!");
        return 0;
      });
    })


    // 详情图
    $(".img_remove2").on('click',function(){
      var src=$(this).attr('src');
      var row_id=$(this).attr('row_id');

      //询问框
      layer.confirm('是否确定删除图片?', {
        btn: ['确定','取消'] //按钮
      }, function(){
        
        $.post('/index.php/sys/img_remove',{tb:'goods',row_id:row_id,field:'dt_imgs',src:src},function(res){
            if(res.code){
                layer.msg(res.msg);
                location.reload();
            }
        })

      }, function(){
        layer.msg("好的!");
        return 0;
      });
    })





    $('#img_add').on('click',function(){$('#file1').click()});
    $('#img_add2').on('click',function(){$('#file2').click()});

    //提交图片
    $("#file1").on('change',function(e){
      $("#tb").remove();$("#source_url").remove();
      var el1='<input id="tb" name="tb" name="tb"  type="hidden" value="goods+image" />';
      var el2='<input id="source_url" name="source_url" type="hidden" value="/goods/edit/id/'+$('#id').val()+'" />';
      $('#file1').after(el1).after(el2);

      $("form").attr('action','/sys/img_add').submit();
    })


    //提交图片
    $("#file2").on('change',function(e){
      $("#tb").remove();$("#source_url").remove();
      var el1='<input id="tb" name="tb"  type="hidden" value="goods+dt_imgs" />';
      var el2='<input id="source_url" name="source_url" type="hidden" value="/goods/edit/id/'+$('#id').val()+'" />';
      $('#file2').after(el1).after(el2);

      $("form").attr('action','/sys/img_add').submit();
    })    

  })  
</script>


</body>
</html>
